.flex{
  display: flex;
}

.flex-ai-c{
  align-items:center;
}

.flex-ai-fs{
  align-items:flex-start;
}

.flex-jc-sa{
  justify-content: space-around;
}
.flex-jc-sb{
  justify-content: space-between;
}

.flex-jc-c{
  justify-content:center;
}

.flex-d-c{
  flex-direction: column;
}
html{
  font-size: 100%;
}
body{
  background-color: #f8f8f8;
}

.example3-enter  {
  opacity: 0;
  transform:   translate(250px,0);
  transform: translate3d(250px,0,0);
}
.example3-enter.example3-enter-active  {
  opacity: 1;
  transform:   translate(0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
.example3-leave  {
  opacity: 1;
  transform: translate(0,0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
.example3-leave.example3-leave-active  {
  opacity: 0;
  transform:   translate(250px,0);
  transform: translate3d(250px,0,0);
}

.hide{
  display: none;
}
